<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pico 基础演示</title>
</head>

<body>
    <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@1.*/css/pico.min.css">
    <main class="container">
        <h2>手风琴</h2>
        <details>
            <summary>问题</summary>
            <p>随机生成两个小数，显示其中最大值</p>
        </details>
        <details>
            <summary>问题</summary>
            <p>随机生成两个小数，显示其中最大值</p>
        </details>
        <h2>输入框+按钮</h2>
        <form>
            <input type="text">
            <button type="submit">发送</button>
        </form>
        <h2>进度条</h2>
        <progress value="25" max="100"></progress>
        <h2>暗夜模式</h2>
        <p data-theme="light">白天模式</p>
        <p data-theme="dark">黑暗模式</p>

        <h2>切换按钮</h2>
        <label>
            <input type="checkbox" role="switch">
            简单的切换按钮
        </label>
        <h2>拖拽条</h2>
        <label>
            <input type="range" value="50">
        </label>
        <h2>引用</h2>
        <blockquote>
            "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non.
            Nam at dui sit amet ipsum cursus ornare."
            <footer>
                <cite>- Phasellus eget lacinia</cite>
            </footer>
        </blockquote>
        <h2>提示</h2>
        <button data-tooltip="Top" data-placement="top">Top</button>
        <button data-tooltip="Right" data-placement="right">Right</button>
        <button data-tooltip="Bottom" data-placement="bottom">Bottom</button>
        <button data-tooltip="Left" data-placement="left">Left</button>

    </main>


</body>

</html>